<template>
    <div class="content">
        <iframe ref='state.bimIframe' :src="state.bimUrl" style="width: 100%; height:100% ;border: none"
         ></iframe>
        <Head></Head>
        <LeftEchartContainer class="animate__animated animate__fadeInLeft" v-if="state.isShow"></LeftEchartContainer>
        <RightEchartContainer class="animate__animated animate__fadeInRight" v-if="state.isShow"></RightEchartContainer>
    </div>
</template>

<script setup>
  import 'animate.css';
  import {defineAsyncComponent, onBeforeUnmount, onMounted, reactive} from "vue";

  const Head = defineAsyncComponent(() => import('./components/head/index.vue'));
  const LeftEchartContainer = defineAsyncComponent(() => import('./components/leftEchartContainer/index.vue'));
  const RightEchartContainer = defineAsyncComponent(() => import('./components/rightEchartContainer/index.vue'));

  //https://www.thingjs.com/pp/2abf1cf9cc38df3cc9d71857
  const state = reactive({
      isShow: false,
      bimUrl: '/ems/bim/index.html',
      bimIframe: null,

  })

    function onIframeLoad () {
        console.log('Iframe has loaded');
    }

  onMounted( ()=>{
      window.addEventListener('message', function(event) {
          console.log('Received message from iframe:', event.data);
      });
  })

</script>

<style lang="scss" scoped>

    .content{
        position: relative;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.71);
    }

</style>
